<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式10个属性） 
			1.控制字体：font-family、font-size、font-weight
			2.控制文本布局：text-align、line-height、letter-spacing、word-spacing
			3.文本修饰效果：text-decoration、text-shadow
			4.处理文本效果：white-space
		-->
		<style>
			/* css3语法：选择器{
						属性: 属性值;
						属性: 属性值;
						......
						 } 
						 叫法：一个样式
			*/
		   bod y div#d1{/* 派生选择器：父亲找儿子【加权】  102*/
			   	color: red;
			   /* 知识点1.文本格式化属性控制字体 
			   font-family：字体家族，指定字体形式
			   */
			   font-family: sans-serif;
			   /* 设置多个字体：浏览器会按照顺序寻找可用字体
			   用户体验，用户系统有什么字体，优先指定字体
			   通常与通配选择器使用  *{}
			   */
			  /* 知识点2：文本格式化属性控制字体
			   font-size：字体大小属性，与单位共存
			   单位  px 像素  使用特点：绝对值、PC端
			         em 相对单位，理解：倍数
					             使用特点相对于元素按照倍数方式、移动端
			   */
			  /* 知识点3：文本格式化属性控制字体
			   font-weight:字体粗细属性，不存在单位
			              属性值：数值【100 200 300 ...900】
								 单词【400==normal、bold、light】
			   使用方法：统配选择器搭配使用：指定全局字体正常字体粗细
				*/
			   font-weight: normal;
			  font-size: 2em;
			  /* 补充：1.英文大写 2.首字母大写  3.段落开始间距200px*/
			  /*text-transform: uppercase; 将文本转换为大写 */
			  /* text-transform: capitalize;  每个单词的首字母大写 */
			  /* text-indent: 200px;  设置每个段落顶部间距为200px */
			  
			  
		   }
		   
		   div#d1{ /* 通过加权方式，锁定元素  权值：101*/
			   color: #ff5500;
			   /* 知识点4：文本格式化属性控制文本格式【对齐、间隙】
			   text-align：文本对齐属性
			   left|right|center|justify:两端对齐,用于弹性布局
			   */
			  text-align: justify;
			  /*
			  知识点5：文本格式化属性控制文本格式【对齐、间隙】
			  行高属性line-height:
			  使用方式：1.高度属性
					   2.在高度·属性上加行高
			  */
			  border: 1px solid red;
			  height: 100px;
			  line-height: 100px;
			  /* 补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离 */
			  /* 知识点6：letter-spacing:设置字符之间间隙 
			     知识点7：word-spacing:设置单词之间间隙
			  */
			 le tter-spacing: 10px;
			 word-spacing: 10px;
		   }
		   #d1{ /* 权值：100*/

		       color: yellow;
		   }
		    a.c1 {/* 权值：11 */
			   /* 知识点6：text-decoration 修饰超链接样式
				使用方法：与统配符一起使用，设置全局页面超链接样式
				属性值：none|underline|line-through
				*/
			   text-decoration: line-through;
			   /* 知识点9：text-shdow 修饰文本阴影
				属性值：X轴 Y轴 blur模糊距离 color
				*/
			   text-shadow: 5px 5px 5px #ff0;
		   }
		   p{
			   border: 1px solid red;
			   /* 知识点10：文本换行效果
				  white-space：文本换行属性
				  属性值：
			  nowrap 不换行只显示一行，超出部分隐藏
			  pre保存空格回车|normal默认，空格合并，隐藏换行
				  */
				 white-space: pre;
		   }
		</style>
	</head>
	<body>
		<!-- 需求：创建div同时指定别名，添加假文【tab】 
		         id选择器，通过加权找到div，添加颜色
		-->
		<div id="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim officia nisi, omnis quam iste consequuntur, veniam tenetur, eveniet libero culpa qui quod ducimus dignissimos nam aliquid tempora labore neque deserunt.</div>
		<hr>
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点8：text-decoration属性：设置超链接效果
		 -->
		<a class="c1 c2" href="https://www.zhangweishihundan.com/">实现跳转【方式：6种】</a>
		<div style="height: 800px"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>
			<p>Lorem ipsum dolor sit amet consectetur 
			adipisicing elit. Ratione maiores sequi exercitationem, 
			necessitatibus quisquam id quaerat reprehenderit, veritatis 
			eligendi non inventore porro voluptatum, molestiae natus adipisci
			 maxime neque eaque incidunt  ?</p>
	</body>
</html>